<template>
    <div class="Mine">

        <Head msg="个人中心" backimg="1">
            <!--     铃铛提醒       -->
            <!--            <img src="../image/icon-notice.png" class="component-head-img">-->
        </Head>

        <div class="home-head" >
            <div class="home-head-left">
                <img src="../image/icon-head.png" class="user-head">
                <div class="home-head-left-content">
                    <div class="user-name">{{user.username}}</div>
                    <div class="user-level">会员</div>
                </div>
            </div>
<!--            <img src="../image/icon-mine-right.png" class="home-head-right">-->
        </div>

        <div class="home-code">
            <div class="code-list" @click="toEnquiry">
                <img src="../image/icon-order1.png" class="list-pic">
                <div class="list-title">询价订单</div>
            </div>
            <div class="code-list" @click="toTests">
                <img src="../image/icon-order2.png" class="list-pic">
                <div class="list-title">检测订单</div>
            </div>
            <div class="code-list" @click="toPurchase">
                <img src="../image/icon-order3.png" class="list-pic">
                <div class="list-title">采购订单</div>
            </div>
        </div>

        <div class="home-body">
            <div class="body-list" @click="toMinesupplier">
                <div class="body-list-head">
                    <img class="body-img" src="../image/icon-supplier.png">
                    <div class="body-title">我的供应商</div>
                </div>
                <img class="body-img-right" src="../image/icon-minedetail-right.png">
            </div>
        </div>
        <div class="close-btn" @click="exit">
              退出登录
        </div>
    </div>
</template>

<script lang="ts">
    import {Component} from 'vue-property-decorator';
    import Sence from '../sence/Sence';
    // import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
    import Head from '@/components/Head.vue';

    @Component({
        components: {
            Head,
        },
    })
    export default class Mine extends Sence {
        public user: any = '';

        /**
         * 初始化
         */
        public mounted(): void {
            this.freshUser().then((res: any) => {
                this.user = res;
            })
        }

        /**
         * 前往个人信息
         */
        public toMinedetail(): void {
            this.$router.push('/minedetail');
        }

        /**
         * 前往询价订单
         */
        public toEnquiry(): void {
            this.$router.push('/orderenquiry');
        }

        /**
         * 前往检测订单
         */
        public toTests(): void {
            this.$router.push('/ordertests');
        }

        /**
         * 前往询价订单
         */
        public toPurchase(): void {
            this.$router.push('/orderpurchase');
        }

        /**
         * 前往我的供应商
         */
        public toMinesupplier(): void {
            this.$router.push('/minesupplier');
        }

        /**
         * 退出登录
         */
        public exit(): void {
            (this as any).$createDialog({
                type: 'confirm',
                icon: 'cubeic-alert',
                title: '提示',
                content: '确认退出登录？',
                confirmBtn: {
                    text: '确定',
                    active: true,
                    disabled: false,
                    href: 'javascript:;'
                },
                cancelBtn: {
                    text: '取消',
                    active: false,
                    disabled: false,
                    href: 'javascript:;'
                },
                onConfirm: () => {
                    localStorage.removeItem("token");
                    this.$router.push('login')
                },
                onCancel: () => {

                }
            }).show();

        }
    }
</script>
<style scoped lang="stylus">
    .home-head
        display flex
        flex-direction row
        background #4876ff
        justify-content space-between
        padding 4vh 6vw 8vh 6vw
        align-items center

        .home-head-left
            display flex
            flex-direction row

        .user-head
            background white
            border 5px solid white
            width 60px
            height 60px
            border-radius 50px
            overflow hidden

        .home-head-left-content
            margin-left 10px
            display flex
            flex-direction column
            justify-content space-around
            align-items flex-start

            .user-name
                font-size 15px
                font-weight bold
                color white

            .user-level
                font-size 13px
                background black
                color white
                border-radius 30px
                padding 4px 10px

        .home-head-right
            width 25px
            height 25px

    .home-code
        position relative
        background white
        box-shadow 0 0 10px #ccc
        margin 0 6vw
        height 100px
        border-radius 8px
        top -5vh
        display flex
        flex-direction row
        justify-content space-around
        align-items center

        .code-list
            display flex
            flex-direction column
            align-items center

            .list-pic
                width 40px
                height 40px
                margin-bottom 6px

            .list-title
                font-size 14px
                color #808080
                font-weight bold

    .component-head-img
        position fixed
        width 25px
        height 25px
        top 10px
        right 6vw
        z-index 100

    .home-body
        position relative
        background white
        box-shadow 0 0 10px #ccc
        margin 0 6vw
        padding 10px 12px
        border-radius 8px
        top -2vh
        display flex
        flex-direction column

    .body-list
        display flex
        flex-direction row
        align-items center
        justify-content space-between

    .body-list-head
        display flex
        flex-direction row
        align-items center

    .body-title
        color #515151

    .body-img
        width 25px
        height 25px
        margin-right 10px

    .body-img-right
        width 20px
        height 20px

    .close-btn
        width 180px
        height 40px
        line-height 40px
        font-weight bold
        color white
        background #fa4254
        margin auto
        border-radius 5px
        text-align center
        margin-top 20vh

</style>

